<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .simple-list {
        border: 1px solid #eee;
        min-width: 300px;
    }
    
    .simple-list ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
    }
    
    .simple-list li {
        padding: 5px;
        margin: 0px;
        display: block;
    }
    
    .simple-list li.simple-list-item:hover {
        background-color: #f3f8ff;
    }
    
    .simple-list li:hover {}
    
    .simple-list li.selected {
        background-color: #6cb5f4;
    }
    .selected{
        background-color: #666;
    }
    div{outline:none;}
    </style>

    <!--<link href="/static/css/layout.css" rel="stylesheet" type="text/css">
    <link href="/static/css/default.css" rel="stylesheet" type="text/css">
    <link href="/static/css/iconfont.css" rel="stylesheet" type="text/css">
    <link href="/static/css/skin.css" rel="stylesheet" type="text/css">-->

    <link href="/static/css/index.css" rel="stylesheet" type="text/css">
    <link href="/static/css/controls.css" rel="stylesheet" type="text/css">
</head>

<body ng-controller="TestCtrl">
    <!-- <g-simple-list list-type="'Single'" data-source="[{key:'aa',value:'aa'},{key:'aa',value:'aa'},{key:'bb',value:'bb'},{key:'cc',value:'bb'},{key:'bb',value:'bb'},{key:'bb',value:'bb'}]" group-by="'key'" text-property="'value'" init-callback="simpleListCallBack">
</g-simple-list> -->
    
<!-- <g-group-list  list-type="Multi" data-source="listSource"   group-by="key" text-property="value" init-callback="simpleListCallBack"
    on-select="selectItem(item)" on-before-select="beforeSelectItem(item)" 
    on-un-select="cancelSelectItem(item)" 
    on-before-un-select="beforeCancelSelectItem(item)"
    submit-name="hello"
    submit-model="hello"
    submit-value-express="value"
></g-group-list> -->

    <div class="wrapper skin">
    <!--列表框-->
        <div class="section">
            <div class="section_header">
                下拉框
            </div>
            <div class="section_body">
            list-type : 列表框类型 single,multi 默认单选<br/>
            data-source : 数据源 显示下拉选项<br/>
            display-express : 数据源显示的字段<br/>
            value-prop : 数据源提交的字段<br/>
            css-class : 额外添加的class<br/>
            width : 宽度<br/>
            init-callback : 初始化执行的函数<br/>
            on-select : 选择后触发de函数<br/>
            on-before-select:选择前触发的函数<br/>
            on-un-select:取消选择后触发的函数<br/>
            on-before-un-select:取消选择前触发的函数<br/>
                <ul class="control_List">
                <li>
                    <!--普通列表-->
                    <input type="text" ng-model="hello1" />
                    <g-simple-list css-class="ddd"
                                    width="250"
                                   list-type="single"
                                   data-source="listSource"
                                   display-express="value"
                                   init-callback="simpleListCallBack"
                                   on-select="selectItem(item)"
                                   on-before-select="beforeSelectItem(item)"
                                   on-un-select="cancelSelectItem(item)"
                                   on-before-un-select="beforeCancelSelectItem(item)"
                                   ng-model="hello1"
                                   value-prop="value"
                            ></g-simple-list>
                    <!--<div class="list-box">
                        <div class="select-down" style="display:block">
                            <div class="select-down-boder">
                                <a href="javascript:void(0);" class="select-down-a ellipsis">无规则包装类</a>
                                <a href="javascript:void(0);" class="select-down-a ellipsis">无规则包装类</a>
                                <a href="javascript:void(0);" class="select-down-a ellipsis">无规则包装类</a>
                            </div>
                        </div>
                    </div>-->
                </li>
               <li>
                   <input type="text" ng-model="hello2" />
                    <g-simple-list css-class="ddd"

                                   list-type="multi"
                                   data-source="listSource"
                                   display-express="value"
                                   init-callback="simpleListCallBack"
                                   on-select="selectItem(item)"
                                   on-before-select="beforeSelectItem(item)"
                                   on-un-select="cancelSelectItem(item)"
                                   on-before-un-select="beforeCancelSelectItem(item)"
                                   ng-model="hello2"
                                   value-prop="value"
                            ></g-simple-list>
                </li>
                <li>
                    <g-simple-list css-class="ddd"

                                   data-source="listSource"
                                   display-express="value"
                                   init-callback="simpleListCallBack"
                                   on-select="selectItem(item)"
                                   on-before-select="beforeSelectItem(item)"
                                   on-un-select="cancelSelectItem(item)"
                                   on-before-un-select="beforeCancelSelectItem(item)"
                                   ng-model="hello3"
                                   value-prop="value"
                            ></g-simple-list>
                </li>


            </ul>
        </div>
    </div>
    <!--列表框-->
    </div>
</body>


<script>
    var ctx = '';
    var basePath = '/gillion-web';
    var locale = 'zh-cn'
</script>
<script src="/bower_components/requirejs/require.js" data-main="/static/app.js" data-bootstrap-modules="'../../html/demo/simplelist/testListModule'"></script>


</html>
